<template>
  <div>
    <!-- list -->
    <div class="share-list">
      <div class="share-list__title">
        <h2>公交路线明细 <strong>【{{ markers.length }}】</strong> </h2>
      </div>
      <div class="share-item" v-for="(item, $index) in markers" :key="$index">
        <div class="share-item__pics">
          <img :src="`http://oa.xngjgg.cn/${item.thumb}`" alt="">
        </div>
        <div class="share-item__info">
          <h2 @click="routeclick($index)">{{ item.route.route_name }}</h2>
          <!-- <span>路段: {{ item.luduan }}</span> -->
          <span>车号: {{ item.code }}</span>
        </div>
      </div>
    </div>

    <!-- 地图 -->
    <div class="map-view">
      <div class="amap" id="amap-container"></div>
    </div>

    <!-- 详情弹窗 -->
    <div class="map-content" v-if="markersInfo.id">
      <div class="map-content__swiper">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(slide, index) in markersInfo.pics" :key="index">
            <img :src="`http://dw.tead.com.cn${slide.pic}`" alt="">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="map-content__main">
        <div class="map-content__title">
          <h2>
            <img v-if="markersInfo.category_id === 1" src="../../assets/images/lump.png" alt="">
            <img v-if="markersInfo.category_id === 2" src="../../assets/images/houct.png" alt="">
            <img v-if="markersInfo.category_id === 3" src="../../assets/images/ship.png" alt="">
            <img v-if="markersInfo.category_id === 4" src="../../assets/images/fly.png" alt="">
            <span>{{ markersInfo.title }}</span>
          </h2>
          <div class="map-content__title-control">
            <span class="rank">{{ markersInfo.rank_txt }}</span>
            <span class="area" v-if="markersInfo.tags">{{ markersInfo.tags }}</span>
          </div>
        </div>
        <div class="map-content__info">
          <p>位置: {{ markersInfo.address }}</p>
          <p>编号: {{ markersInfo.code }}</p>
          <p>日曝光(人次): {{ markersInfo.show_num }}</p>
          <p>价格: ￥<strong>{{ markersInfo.price }}</strong>/月</p>
        </div>
        <div class="map-content__button">
          <a class="join" @click="addCheckListSingle">加入点位</a>
          <a class="status">
            {{ markersInfo.status | typeFilter }}
          </a>
        </div>
        <div class="map-content__control" v-if="Number(userInfo.role_id) === 100">
          <strong>到期时间: {{ markersInfo.end_at ? markersInfo.end_at : '暂无数据' }}</strong>
          <template v-if="markersInfo.customers && markersInfo.customers.length">
            <p>上画客户: {{ markersInfo.customers[0].name }}</p>
            <p>业务经理: {{ markersInfo.customers[0].partner }}</p>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'swiper/swiper-bundle.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import { getPointInfo, getPointDetail, addCheckListSingle, getSearch } from '@/api/map'

const icon = require('../../assets/images/timg-1.gif')

export default {
  name: 'Share-map',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      icon,
      key: 0,
      loading: false,
      center: '厦门市',
      zoom: 13,
      cluszoom: 15,
      markers: [],
      markersAll: [],
      markersInfo: {},
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
      },
      queryParams: {
        status: null,
        is_roll: null,
        openid: '',
        filter: '1'
      },
      keyword: '',
      userInfo: {
        role_id: 0
      },
      test: null,
      map: null,
      mark: [],
      circle: null,
      markGroup: [],
      markSearch: [],
      reslist: [],
      type: null,
      markSingle: []
    }
  },
  created () {
    this.userInfo = JSON.parse(window.sessionStorage.getItem('userInfo')) || { role_id: 0 }

    this.getPointInfo()
  },
  mounted () {
    // if (document.referrer === '') {
    // window.localStorage.clear('user')
    // }
  },
  methods: {
    routeclick (index) {
      this.type = 1
      this.map.clearMap()
      this.lineSearch_Callback(this.reslist[index])
      this.map.add(this.test)
      console.log(this.reslist)
      console.log(index)
      console.log(this.reslist[index])
    },
    async getPointInfo () {
      const { data } = await getPointInfo(this.$route.query.id)
      this.markers = data
      console.log(1)
      // this.markers = data.map(item => {
      //   const markers = {
      //     icon,
      //     lng: item.lnglat.split(',')[0],
      //     lat: item.lnglat.split(',')[1],
      //     ...item
      //   }
      //   return markers
      // })
      await this.amapInit()
    },
    amapInit () {
      console.log(2)
      const vm = this
      this.map = new AMap.Map('amap-container', {
        center: [118.111436, 24.471837],
        resizeEnable: true,
        zoom: 12,
        mapStyle: 'amap://styles/50471cf997eaa81d3140f305ae3a7fae',
        features: ['bg', 'road', 'building', 'point']
      })
      // this.mark = this.markers.map(item => {
      //   // const marker = new AMap.Marker({
      //   //   icon: item.icon,
      //   //   position: [item.lng, item.lat],
      //   //   width: '25px',
      //   //   height: '25px',
      //   //   id: item.id,
      //   //   code: item.code
      //   // })
      //   const marker = new AMap.Text({
      //     text: item.code,
      //     anchor: 'center', // 设置文本标记锚点
      //     // eslint-disable-next-line
      //     style: {
      //       width: '15px',
      //       height: '15px',
      //       background: '#f56c6c'
      //     },
      //     // icon: this.getIcons(item.category_id, item.status),
      //     position: [item.lng, item.lat],
      //     category_id: item.category_id,
      //     id: item.id,
      //     code: item.code
      //   })
      //   return marker
      // })
      vm.markers.forEach((item, index) => {
        var linesearch = new AMap.LineSearch({
          pageIndex: 1, // 页码，默认值为1
          pageSize: 1, // 单页显示结果条数，默认值为20，最大值为50
          city: '西宁', // 限定查询城市，可以是城市名（中文/中文全拼）、城市编码，默认值为『全国』
          extensions: 'all' // 是否返回公交线路详细信息，默认值为『base』
        })
        linesearch.search(item.route.pure_name, function (status, result) {
        // 打印状态信息status和结果信息result
          if (status === 'complete' && result.info === 'OK') {
            vm.reslist.push(result)
            console.log(vm.reslist)
            // console.log(result.lineInfo[0].via_stops)
            // vm.test = new AMap.Marker({
            //   position: new AMap.LngLat(101.77531699999997, 36.624314), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            //   title: '北京'
            // })

            // console.log(marker11)
            // vm.mark = [
            // //   ...that.markers,
            //   ...result.lineInfo[0].via_stops.map((item) => {
            //     return {
            //       position: [item.location.R, item.location.Q],
            //       title: item.name
            //       // icon,
            //       // events:
            //     }
            //   })
            // ]
            // console.log(vm.mark)
            vm.lineSearch_Callback(result)
          } else {
            alert(result)

            // })
          }
        })
      })

      // this.mark.forEach(item => {
      //   item.on('click', function (e) {
      //     const point = e.target.w.position
      //     vm.map.remove(vm.markSingle)
      //     vm.markSingle = []
      //     const markSingle = new AMap.Marker({
      //       icon: icon,
      //       position: [point.lng, point.lat],
      //       width: '25px',
      //       height: '25px',
      //       id: e.target.G.id,
      //       code: e.target.G.code
      //     })
      //     vm.markSingle.push(markSingle)
      //     vm.map.add(vm.markSingle)
      //     vm.getMarkerInfo(e.target.w.id, 0)
      //   })
      // })
      // this.map.add(this.mark)
    },
    lineSearch_Callback (data) {
      var lineArr = data.lineInfo
      var lineNum = data.lineInfo.length
      this.test = data.lineInfo[0].via_stops.map((item) => {
        const marker = new AMap.Marker({
          position: [item.location.R, item.location.Q],
          content: item.name
        })
        return marker
      })
      // console.log(data.lineInfo.length)
      // eslint-disable-next-line eqeqeq
      if (lineNum == 0) {
      } else {
        for (var i = 0; i < lineNum; i++) {
          var pathArr = lineArr[i].path
          var stops = lineArr[i].via_stops
          var startPot = stops[0].location
          var endPot = stops[stops.length - 1].location
          // console.log(pathArr)
          // eslint-disable-next-line eqeqeq
          if (i == 0) {
            this.drawbusLine(startPot, endPot, pathArr)
          } // 作为示例，只绘制一条线路
        }
      }
    },
    drawbusLine (startPot, endPot, BusArr) {
      // console.log(this.map)
      // const that = this
      // 绘制起点，终点
      // eslint-disable-next-line no-new
      new AMap.Marker({
        map: this.map,
        position: startPot, // 基点位置
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
        zIndex: 10,
        anchor: 'bottom-center'
      })
      // eslint-disable-next-line no-new
      new AMap.Marker({
        map: this.map,
        position: endPot, // 基点位置
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
        zIndex: 10,
        anchor: 'bottom-center'
      })
      // console.log(BusArr)
      // 绘制乘车的路线
      if (this.type == 1) {
        var busPolyline = new AMap.Polyline({
          map: this.map,
          path: BusArr,
          strokeColor: 'red', // 线颜色
          strokeOpacity: 0.8, // 线透明度
          isOutline: true,
          outlineColor: 'white',
          strokeWeight: 6 // 线宽
        })
      } else {
        var busPolyline = new AMap.Polyline({
          map: this.map,
          path: BusArr,
          strokeColor: '#09f', // 线颜色
          strokeOpacity: 0.8, // 线透明度
          isOutline: true,
          outlineColor: 'white',
          strokeWeight: 6 // 线宽
        })
      }
      // var busPolyline = new AMap.Polyline({
      //   map: this.map,
      //   path: BusArr,
      //   strokeColor: '#09f', // 线颜色
      //   strokeOpacity: 0.8, // 线透明度
      //   isOutline: true,
      //   outlineColor: 'white',
      //   strokeWeight: 6 // 线宽
      // })
      // 将 busPolyline 显示在地图中心并自动缩放地图到合适级别。
      // true表示需要动画过程，[60,200,60,60]表示上下左右避让像素
      this.map.setFitView(busPolyline, [60, 200, 60, 60])
    },
    // 地图初始化
    setMapInfo ({ BMap, map }) {
    },
    getFilter (value) {
      this.key = 0
      this.loading = true
      this.mark = []
      this.markers = []
      this.markersAll = []
      this.map.remove(this.mark)
      this.map.destroy()
      this.queryParams.status = Number(value)
      this.loading = false
    },
    getMarkerInfo (data, index) {
      const token = window.sessionStorage.getItem('token')
      this.loading = true
      const parmas = {
        id: data,
        token
      }
      getPointDetail(parmas).then(res => {
        if (res.status) {
          // console.log('this.markersInfo', this.markersInfo)
          this.markersInfo = res.data
          this.loading = false
        } else {
          alert(res.status)
        }
      }).catch(err => {
        alert(err)
      })
      this.loading = false
    },
    getClear () {
      this.map.remove(this.markGroup)
      this.markGroup = []
    },
    getSearch (id) {
      this.laoding = true
      getSearch({ code: id }).then(res => {
        if (res.status) {
          // console.log('getPointDetail', res.data)
          this.markersInfo = res.data
          // console.log(res.data.lnglat.split(','))
          // const mark = new AMap.Marker({
          //   icon: icon,
          //   position: [res.data.lnglat.split(',')[0], res.data.lnglat.split(',')[1]],
          //   width: '25px',
          //   height: '25px',
          //   id: this.markersInfo.id,
          //   code: this.markersInfo.code
          // })
          const mark = new AMap.Text({
            text: this.markersInfo.code,
            anchor: 'center', // 设置文本标记锚点
            // eslint-disable-next-line
            style: {
              width: '15px',
              height: '15px',
              background: '#f56c6c'
            },
            // icon: this.getIcons(item.category_id, item.status),
            position: [res.data.lnglat.split(',')[0], res.data.lnglat.split(',')[1]],
            category_id: this.markersInfo.category_id,
            id: this.markersInfo.id,
            code: this.markersInfo.code
          })
          this.markGroup.push(mark)
          this.map.setCenter(res.data.lnglat.split(','))
          this.map.setZoom(15)
          this.map.add(this.markGroup)
          this.loading = false
          // this.center = res.data.address
          // this.zoom = 20
        } else {
          alert('getSearch Point catch', res.status)
        }
      }).catch(err => {
        alert('getSearch catch', err)
      })
    },
    getLbs (value, radius = 1500) {
      const vm = this
      AMap.plugin('AMap.PlaceSearch', function () {
        const autoOptions = {
          city: '厦门'
        }
        const placeSearch = new AMap.PlaceSearch(autoOptions)
        placeSearch.search(value, function (status, result) {
          vm.map.setCenter([result.poiList.pois[0].location.lng, result.poiList.pois[0].location.lat])
          vm.map.setZoom(15)
        })
      })
    },
    // 新增check
    async addCheckListSingle (id) {
      const { status } = await addCheckListSingle({ billboard_id: this.markersInfo.id })
      if (status) {
        // console.log('已选点位', this.markersInfo)
        const mark = new AMap.Marker({
          icon: icon,
          position: [this.markersInfo.lnglat.split(',')[0], this.markersInfo.lnglat.split(',')[1]],
          width: '25px',
          height: '25px',
          id: this.markersInfo.id,
          code: this.markersInfo.code
        })
        this.markGroup.push(mark)
        this.map.add(this.markGroup)
        this.$emit('refreshCheck')
        this.$notification.success({
          message: '新增成功'
        })
      } else {
        this.$notification.error({
          message: '新增失败'
        })
      }
    }
  },
  filters: {
    typeFilter (val) {
      return Number(val) === 1 ? '空点' : (Number(val) === 2 ? '定点' : '不定点')
    }
  }
}
</script>

<style>
.amap-overlay-text-container {
  border-radius: 50%;
  border: 0;
  padding: 0;
  font-size: 0;
}
</style>

<style lang="less" scoped>
  .map-view {
    position: absolute;
    z-index: 1;
    // width: 100%;
    height: 100%;
    top: 0;
    left: 265px;
    right: 0;

    .amap {
      height: 100%;
    }
  }

  .map-content {
    position: absolute;
    top: 120px;
    left: 120px;
    width: 350px;
    min-height: 520px;
    z-index: 2;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 4px 5px rgba(0, 0, 0, .1);

    &__ {
      &swiper {
        height: 235px;

        img {
          width: 100%;
          height: 235px;
        }
      }

      &main {
        padding: 0 15px 12px;
        // height: 355px;
      }

      &title {
        height: 82px;
        border-bottom: 1px dashed #ababab;
        overflow: hidden;

        h2 {
          display: flex;
          height: 20px;
          margin: 18px 0 9px;
          font-size: 16px;
          color: #333;

          // img, span {
          //   display: inline-block;
          // }

          img {
            margin-right: 15px;
          }

          span {
            display: block;
            flex: 1;
            width: auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        &-control {
          padding: 0 15px;

          span {
            display: inline-block;
            vertical-align: top;
            height: 20px;
            font-size: 12px;
            border-radius: 10px;
            color: #fff;
            margin: 0 5px;
            text-align: center;
          }

          .rank {
            width: 55px;
            background: #46d3ca;
          }

          .area {
            padding: 0 10px;
            background: #ffa453;
          }
        }
      }

      &info {
        font-size: 12px;
        padding: 6px 0;
        border-bottom: 1px dashed #ababab;

        p {
          font-size: 12px;
          margin: 0;
          line-height: 2;
        }
      }

      &button {
        display: flex;
        align-items: center;
        padding: 12px 0;

        a {
          flex: 1;
          display: block;
          height: 32px;
          line-height: 32px;
          color: #fff;
          font-size: 16px;
          text-align: center;

          &:first-child {
            margin-right: 10px;
          }

          &.join {
            background: #ffa453;
          }

          &.status {
            background: #46d3ca;
          }
        }
      }

      &control {
        strong {
          display: block;
          height: 30px;
          line-height: 30px;
          padding: 0 10px;
          background: #f2f2f2;
          color: #333;
          font-weight: normal;
          margin-bottom: 7px;
        }

        p {
          margin: 0;
          line-height: 24px;
        }
      }
    }
  }

  .share-list {
    position: absolute;
    width: 265px;
    left: 0;
    top: 0;
    height: 100%;
    padding: 0 10px;
    overflow: scroll;

    &__title {
      padding: 25px 0 15px;

      h2 {
        line-height: 1;
        border-left: 5px solid #005bd7;
        padding-left: 14px;
        font-size: 18px;
        margin: 0;
        strong {
          color: #ffa453;
          font-weight: normal;
        }
      }
    }
  }

  .share-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    &__pics {
      width: 80px;
      height: 60px;
      margin-right: 10px;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    &__info {
      flex: 1;
      min-width: 120px;
      h2 {
        font-size: 14px;
        color: #005bd7;
        margin-bottom: 0;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      span {
        display: block;
        font-size: 14px;
        color: #333;
      }
    }
  }
</style>
